<template>
	<view class="content">
		<view class="status_bar"></view>
		<view class="top f-c-b">
			<view class="top_left f-c-a">
				<view class="top_left_head">
					<u-avatar :src="$u.baseUrl+vuex_user.img"></u-avatar>
				</view>
				<view class="top_head_info cw">
					<view class="top_head_info_im fw f30 f-c-b">
						<text>{{vuex_user.name}}</text>
						<image @click="$to(`../edit-info/edit-info`)" src="../../static/my/icon_bj.png" mode="widthFix"></image>
					</view>
					<view class="f20">{{vuex_user.area}}</view>
				</view>
			</view>
			<view class="top_right" @click="$to(`../integral/integral`)">
				<view class="top_right_box f-l-c">
					<view class="top_right_box_one fw">积分</view>
					<view class="cw">{{vuex_user.score}}</view>
				</view>
			</view>
		</view>
	
		<view class="iconItem">
			<view class="item f-l-c" v-for="(item,index) in iconList" @click="index==4?show=true:$to(item.toUrl)">
				<image :src="item.url" mode="widthFix"></image>
				<view class="">{{item.title}}</view>
			</view>
		</view>
		
		<view class="iconItem2">
			<view class="item2 f-c-b" v-for="(item,index) in iconList2" @click="$to(item.toUrl)">
				<view class="item2-left f-c-c">
					<image :src="item.url" mode="widthFix"></image>
					<text>{{item.title}}</text>
				</view>
				<view class="item2-right">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		
		<u-mask :show="show" @click="show = false" class="f-c-c">
			<view class="">
				<view class="erweimaBox f-l-c">
					<view class="erweimaBox-title f-c-c cw f30">
						扫码下载app
					</view>
					<view class="">
						<image src="../../static/my/img_ewm.png" mode="widthFix"></image>
					</view>
					<view class="erweimaBox-btn f-c-c f25">
						<image src="../../static/my/icon_xz.png" mode="widthFix"></image>
						保存到本地
					</view>
				</view>
				<view class="f-c-c closeBox" @click="toClose">
					<image class="iconClose" src="../../static/my/icon_close.png" mode="widthFix"></image>
				</view>
			</view>
		</u-mask>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iconList: [{
					url: '../../static/my/icon_fb.png',
					title: "我发布的",
					toUrl:'../my-release/my-release'
				}, {
					url: '../../static/my/icon_sc.png',
					title: "我的收藏",
					toUrl:'../myCollection/myCollection'
				}, {
					url: '../../static/my/icon_jl.png',
					title: "买卖记录",
					toUrl:'../transactionRecords/transactionRecords'
				}, {
					url: '../../static/my/icon_ck.png',
					title: "数字化仓库",
					toUrl:'../digitalWarehouse/digitalWarehouse'
				}, {
					url: '../../static/my/icon_fx.png',
					title: "分享APP"
				}, {
					url: '../../static/my/icon_dd.png',
					title: "订单",
					toUrl:'../order/order'
				}, ],
				iconList2:[{
					url:'../../static/my/icon_lxwm.png',
					title:'联系我们',
					toUrl:'../contactUs/contactUs'
				},{
					url:'../../static/my/icon_rz.png',
					title:'实名认证',
					toUrl:'../Verified/Verified'
				},{
					url:'../../static/my/icon_yjfk.png',
					title:'意见反馈',
					toUrl:'../feedback/feedback'
				},{
					url:'../../static/my/icon_sz.png',
					title:'账户管理',
					toUrl:'../account/account'
				},{
					url:'../../static/my/icon_gfwm.png',
					title:'关于我们',
					toUrl:'../aboutUs/aboutUs'
				}],
				show:false
			}
		},
		methods: {
			toClose(){
				this.show=false
			}
		},
		onLoad() {
			
		}
	}
</script>

<style>
	.content{
		background-color: #F4F4F4;
		height: 100vh;
	}
	.top {
		height: 340rpx;
		width: 100%;
		background-image: url(../../static/my/img_bj.png);
		background-size: 100% 100%;
		padding: 30rpx;
	}

	.top_left_head {
		width:99rpx;
		height: 99rpx;
		border: 4rpx solid #FFFFFF;
		position: relative;
		z-index: 999;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.top_left_head image {
		width: 100rpx;
		border-radius: 50%;
	}

	.top_head_info_im {
		margin-bottom: 10rpx;
	}

	.top_head_info_im image {
		width: 30rpx;
		margin-right: 20rpx;
	}

	.top_right_box {
		border: 1rpx solid #FFFFFF;
		border-radius: 10rpx;
	}

	.top_right_box_one {
		background-color: #FFFFFF;
		color: #F19A42;
		padding: 0 5rpx;
	}
	.item{
		background-color: #FFFFFF;
		width: 247rpx;
		margin-bottom: 4rpx;
		padding: 40rpx 0;
	}
	.item image{
		width: 40rpx;
		margin-bottom: 15rpx;
	}
	.iconItem{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	.item2{
		background-color: #FFFFFF;
		margin-bottom: 2rpx;
		padding:30rpx 40rpx;
	}
	.item2-left image{
		width: 35rpx;
		margin-right: 20rpx;
	}
	.erweimaBox{
		width: 410rpx;
		height: auto;
		background-color: #FFFFFF;
	}
	.erweimaBox image{
		width: 378rpx;
	}
	.erweimaBox-title{
		background-color: #FF8710;
		width: 100%;
		padding:20rpx 0;
	}
	.erweimaBox-btn{
		background-color: #F4F4F4;
		width: 100%;
		line-height: 60rpx;
	}
	.erweimaBox-btn image{
		width: 20rpx;
		margin-right: 20rpx;
	}
	.iconClose{
		width: 40rpx;
	}
	.closeBox{
			margin-top: 30rpx;
	}
</style>
